<template>
	<view>
		<view class="address-form">
			<view class="address-form-button">
				选择收货地址
			</view>
			<view class="address-form-group">
				<view class="layout">
					<view class="address-form-group-tooltip">门牌号</view>
					<view class="address-form-group-volume">
						<input type="text" v-model="addressForm.address" placeholder="详细地址,例1层101室1" />
					</view>
					
				</view>
			</view>
			<view class="address-form-group">
				<view class="layout">
					<view class="address-form-group-tooltip">标签</view>
					<view class="address-form-group-volume">
						<view class="layout">
							<view class="address-form-group-volume-label">家</view>
							<view class="address-form-group-volume-label">公司</view>
							<view class="address-form-group-volume-label">学校</view>
						</view>
					</view>
					
				</view>
			</view>
			<view class="address-form-group">
				<view class="layout">
					<view class="address-form-group-tooltip">联系人</view>
					<view class="address-form-group-volume">
						<view class="layout">
							<view class="address-form-group-volume-text">
								<input  v-model="addressForm.fullname" type="text" placeholder="请填写收货人的姓名" />
							</view>
							<view class="address-form-group-volume-radio">
								<radio-group v-model="addressForm.style">
									<radio value="1">先生</radio>
									<radio value="2">女士</radio>
								</radio-group>
							</view>
						</view>
					</view>
					
				</view>
			</view>
			<view class="address-form-group">
				<view class="layout">
					<view class="address-form-group-tooltip">手机号</view>
					<view class="address-form-group-volume">
						<input type="text" v-model="addressForm.telephone" placeholder="请填写收货手机号码" />
					</view>
					
				</view>
			</view>
			<view class="address-form-submit" @click="hanldeAddressSubmit()">保存地址</view>
			<view class="address-form-submit" @click="hanldeRemoveSubmit()">删除</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressID:0,
				addressForm:{
					"style":0,
					"telephone":"",
					"address":"",
					"fullname":""
				}
			}
		},
		onLoad(options) {
			if(options.addressID != undefined){
				this.addressID = options.addressID
				this.fetchAddressData();
			}
		},
		methods: {
			fetchAddressData:function(){
				let _this = this;
				if(this.addressID < 1){
					return false;
				}
				this.$transaction.getAddressDetail({
					"addressID":this.addressID
				}).then(res=>{
					console.log(res)
					if(res.code == 200){
						_this.addressForm = res.data;
					}else{
						
					}
				})
			},
			hanldeRemoveSubmit:function(){
				let _this = this;
				if(this.addressID < 1){
					return false;
				}
				this.$transaction.removeAddress({
					"addressID":this.addressID
				}).then(res=>{
					console.log(res)
					if(res.code == 200){
						uni.redirectTo({
							url:"/pages/transaction/address/address"
						})
					}else{
						
					}
				})
			},
			hanldeAddressSubmit:function(){
				if(this.addressID > 0){
					this.addressForm.addressID = this.addressID;
				}
				if(this.addressForm.address.length < 1){
					uni.showToast({
						icon:"none",
						title:"请填写门牌号"
					})
					return false;
				}
				if(this.addressForm.fullname.length < 1){
					uni.showToast({
						icon:"none",
						title:"请填写联系人"
					})
					return false;
				}
				if(this.addressForm.telephone.length != 11){
					uni.showToast({
						icon:"none",
						title:"请检查手机号码"
					})
					return false;
				}
				this.$transaction.submitAddress(this.addressForm).then(res=>{
					if(res.code == 200){
						uni.redirectTo({
							url:"/pages/transaction/address/address"
						})
					}else{
						uni.showToast({
							icon:"none",
							title:res.message
						})
					}
				});
			}
		}
	}
</script>

<style>
page { background: #ededed; }
.address-form { background: #fff; width: 660rpx; margin: 30rpx auto; border-radius: 30rpx; }
.address-form { position: fixed; top: 80rpx; bottom: 5rpx; left: 30rpx; right: 30rpx; }
.address-form { padding: 20rpx;}
.address-form-group { padding:30rpx 25rpx; }
.address-form-group-tooltip { width: 150rpx; font-size: 18px; font-weight: bold;}
.address-form-group-volume { width: 450rpx; overflow: hidden; border-bottom: #ededed 1px solid; }
.address-form-group-volume-label { border: #ededed 1px solid; padding: 15rpx 25rpx; border-radius: 10rpx;}
.address-form-group-volume-label { margin-right: 20rpx; font-size: 14px;}
.address-form-group-volume-text { width: 280rpx; overflow: hidden; }
.address-form-group-volume-radio { width: 170rpx; font-size: 13px; overflow: hidden; }

.address-form-button { border: red 1px solid; margin-top: 40rpx; color: red; font-weight: bold; }
.address-form-button { text-align: center; border-radius: 50rpx; padding: 20rpx 0; }

.address-form-submit { background: red; color: #fff; font-weight: bold; margin-top: 30rpx; }
.address-form-submit { text-align: center; border-radius: 10rpx; padding: 20rpx 0; }
</style>
